<template>
  <div class="screen-header">
    <div class="header-title">{{ title }}</div>
    <div class="header-time">
      <div style="font-size: 12px">{{ date }} {{ week }}</div>
      <div>{{ time }}</div>
    </div>
    <div class="full" :title="fullScreen ? '退出全屏' : '全屏'" @click="handleFull">
      {{ fullScreen ? "退出" : "全屏" }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Page-title",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      date: "", // 日期
      time: "", // 时间
      week: "", // 星期
      timer: null, // 时间定时器
      fullScreen: false, // 是否全屏
    };
  },
  mounted() {
    this.getDate();
    this.getTime();
    this.getWeek();
    this.timer = setInterval(() => {
      this.getDate();
      this.getTime();
      this.getWeek();
    }, 1000);
    document.addEventListener("fullscreenchange", this.handleFullScreenChange);
    document.addEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    // 获取日期
    getDate() {
      const time = new Date();
      let m = time.getMonth() + 1;
      if (m < 10) m = "0" + m;
      let d = time.getDate();
      if (d < 10) d = "0" + d;
      this.date = `${m}月${d}日`;
    },
    // 获取星期
    getWeek() {
      const time = new Date();
      let week = time.getDay();
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.week = weeks[week];
    },
    // 获取时间
    getTime() {
      const time = new Date();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      if (h < 10) h = "0" + h;
      if (m < 10) m = "0" + m;
      if (s < 10) s = "0" + s;
      this.time = `${h}:${m}:${s}`;
    },
    // 全屏 / 退出全屏
    handleFull() {
      if (this.fullScreen) {
        this.fullScreen = false;
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else if (document.webkitFullscreenElement) {
          document.webkitExitFullscreen();
        } else if (document.mozFullScreenElement) {
          document.mozCancelFullScreen();
        } else if (document.msFullscreenElement) {
          document.msExitFullscreen();
        }
      } else {
        this.fullScreen = true;
        const elem = document.documentElement;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
      }
    },
    // 监听全屏状态变化
    handleFullScreenChange() {
      let full =
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement;
      this.fullSrceen = !!full;
    },
    // 监听键盘全屏
    handleKeyDown(e) {
      if (e.key === "F11") {
        e.preventDefault();
        this.handleFull();
      } else if (e.key === "Escape") {
        let full =
          document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullscreenElement;
        if (full) {
          this.handleFull();
        }
      }
    },
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    document.removeEventListener("fullscreenchange", this.handleFullScreenChange);
    document.removeEventListener("keydown", this.handleKeyDown);
  },
};
</script>
<style lang="scss" scoped>
.screen-header {
  width: 100%;
  height: 112px;
  background: url("~@/assets/screen-title-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  .header-title {
    font-family: Alibaba PuHuiTi 20;
    font-weight: 600;
    color: #ffffff;
    font-size: 43px;
    line-height: 82px;
    letter-spacing: 15px;
    text-shadow: 0 0 10px rgba(86, 164, 254, 0.6);
  }
  .header-time {
    position: absolute;
    right: 136px;
    top: 18px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    color: rgba(86, 198, 254, 0.92);
    letter-spacing: 2px;
  }
  .full {
    position: absolute;
    right: 33px;
    top: 23px;
    display: inline-block;
    width: 56px;
    height: 26px;
    font-family: Alibaba PuHuiTi 20;
    font-size: 16px;
    color: #fff;
    border-radius: 2px;
    border: 1px solid;
    text-align: center;
    line-height: 26px;
    text-shadow: 0px 1px 4px rgba(0, 162, 255, 0.63);
    background: linear-gradient(180deg, #062639 0%, #144b69 100%);
    border-image: linear-gradient(180deg, rgba(6, 38, 57, 1), rgba(71, 174, 232, 1)) 1 1;
    &:hover {
      cursor: pointer;
      opacity: 0.9;
    }
  }
}
</style>
